<template lang="html">
  <div class="bids">
    <banner :imgUrl="imgUrl"></banner>
    <div class="bids-wrapper">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Banner from 'components/index/banner/banner'

import {getGroupData} from 'api/article.js'

import {filterObj} from 'common/js/filterObj.js'

export default {
  data() {
    return {
      imgUrl: require('./new.jpg'),
      callBidsData: []
    }
  },
  methods: {
    toDetail(id) {
      this.$router.push('/index/bid-detail/' + id)
    },
    _filterObj(obj) {
      return filterObj(obj)
    },
    _getCallBids(tag) {
      getGroupData(tag).then((res) => {
        this.callBidsData = res.data
      })
    }
  },
  components: {
    Banner
  },
  created() {
    this._getCallBids('callbids')
  }
}
</script>

<style lang="scss">
.bids{
  width: 100%;
  .bids-wrapper{
    width:1200px;
    margin:0 auto;
    margin-bottom: 90px;
    .big{
      text-align: center;
      font-size: 60px;
      line-height: 60px;
      margin-bottom: 110px;
    }
    h4{
      font-size: 24px;
      line-height: 40px;
      margin-left: 5%;
      margin-bottom: 28px;
      padding-left: 5%;
      color: #fff;
      background: url("./serverTitle.png") no-repeat;
      background-size: 220px 42px;
    }
    .same-container{
      display: flex;
      justify-content:center;
      padding-top: 20px;
      .little{
        cursor: pointer;
        width:960px;
        .title{
          display: flex;
          justify-content: space-between;
          margin-bottom: 30px;
          h2{
            font-size: 22px;
            margin-left: 10px;
          }
          span{
            font-size: 14px;
            color: #858482;
            margin-right: 10px;
          }
        }
        .content{
          p{
            //text-indent: 32px;
            line-height: 32px;
            margin-bottom: 20px;
          }
          ul{
            width: 100%;
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            li{
              width: 300px;
              height: 300px;
              img{
                width: 300px;
                height: 300px;
              }
            }
          }
        }
      }
    }
    .top{
        margin-bottom: 80px;
    }
    .bottom{

    }
  }
}
</style>
